<template>
  <section class="page-content">
    <div class="toolbar">
      <!-- <el-form :inline="true" :model="params">
        <el-form-item>
          <el-button type="success" size="small" icon="plus" @click="create">新增</el-button>
        </el-form-item>
      </el-form> -->
      系统设置
    </div>
    <el-table
      v-loading="loading"
      :data="tableData"
      border>
      <el-table-column
        prop="name"
        width="280"
        label="名称">
        <template slot-scope="scope">
          {{ scope.row.name }} <span style="color:#999">({{ scope.row.key }})</span>
        </template>
      </el-table-column>
      <el-table-column
        width="580"
        label="值">
        <template slot-scope="scope">
          <el-input v-if="scope.row.type === 'TEXT'" size="small" v-model="scope.row.value"></el-input>
          <el-input v-if="scope.row.type === 'TEXTAREA'" type="textarea" v-model="scope.row.value"></el-input>
          <el-switch v-if="scope.row.type === 'BOOLEAN'" v-model="scope.row.value"  active-value="1" inactive-value="0"></el-switch>
        </template>
      </el-table-column>
      <el-table-column
        prop="desc"
        label="备注">
      </el-table-column>
    </el-table>
     <div class="toolbar">
        <el-button type="primary" size="small"  @click="save">保存</el-button>
    </div>
  </section>
</template>
<script>
  export default {
    data () {
      return {
        loading: false,
        tableData: []
      }
    },
    mounted () {
      this._getData()
    },
    methods: {
      save () {
        this.$http.put('/configs/update_all', {data: this.tableData}).then((response) => {
          this.$message.success(response.data.message)
        }).catch((error) => {
          console.log(error)
        })
      },
      _getData () {
        this.loading = true
        this.$http.get('/configs').then((response) => {
          this.loading = false
          this.tableData = response.data
        }).catch((error) => {
          this.loading = false
          console.log(error)
        })
      }
    }
  }
</script>
 